<template>
<div class="details">
    <div class="details_1">
        <!-- <div class="details_1_1">请于{{getDatas.last_pay_time}}以前转款至以下账户</div> -->
        <div class="details_1_1">请按时转款至以下账号，以确保矿机有序运转</div>
        <div class="details_list">
            <div>账户名</div>
            <div>{{zhName}}</div>
        </div>
        <div class="details_list">
            <div>账号</div>
            <div>{{moneyNo}}</div>
        </div>
        <div class="details_list">
            <div>开户行</div>
            <div>{{bankOpen}}</div>
        </div>
        <div class="details_list">
            <div>转账金额</div>
            <div>¥{{getDatas.order_amount}}</div>
        </div>
        <div class="details_listb">
            <div>转账备注</div>
            <div>{{getDatas.order_sn}}</div>
            <div @click="cpaer">复制</div>
        </div>
        <div class="anN" @click="updataPaySta" :class="{ 'anNBackground' : orderSta == '待支付' }">
            我已转账
        </div>
    </div>
    <div class="details_2">
        <div class="details_1_2">订单详情</div>
        <div class="details_list">
            <div>订单编号</div>
            <div>{{getDatas.order_sn}}</div>
        </div>
        <div class="details_list">
            <div>订单状态</div>
            <div :class="{ 'text_color_red' : orderSta == '待支付' }">{{orderSta}}</div>
        </div>
        <div class="details_list" style="border-bottom: 2rpx solid #e2e2e2;">
            <div>下单时间</div>
            <div>{{getDatas.create_time}}</div>
        </div>
        <div class="details_list">
            <div>姓名</div>
            <div>{{getDatas.name}}</div>
        </div>
        <div class="details_list">
            <div>手机号码</div>
            <div>{{getDatas.mobile}}</div>
        </div>
        <div class="details_list">
            <div>收费月份</div>
            <div>{{getDatas.time_slot}}</div>
        </div>
        <div class="details_list">
            <div>应付金额</div>
            <div>¥{{getDatas.order_amount}}</div>
        </div>
    </div>
    <div class="details_3">
        <div class="details_1_2">费用明细</div>
        <div class="biao">
            <div class="biao_a">
                <div>矿机型号</div>
                <div>总运行时长(h)</div>
                <div>总掉线时长(h)</div>
                <div>应付电费(元)</div>
            </div>
            <div class="biao_b" v-for="(item,index) in getDatas.order_info" :key="item.id">
                <div>{{item.mining_machine_name}}</div>
                <div>{{item.server_time}}</div>
                <div>{{item.done_time}}</div>
                <div>{{item.money}}</div>
            </div>
        </div>
        <div class="details_list">
            <div>机位费</div>
            <div>¥{{getDatas.airfare}}</div>
        </div>
        <div class="details_list">
            <div>其他费用</div>
            <div>¥{{getDatas.other_money}}</div>
        </div>
        <div class="details_list">
            <div>费用备注</div>
            <div>{{getDatas.note ? getDatas.note : "--"}}</div>
        </div>
    </div>
</div>
</template>

<script>
import js from "../../utils/js"
export default {
    components: {},

    data() {
        return {
            id: "",
            url: "/Users/orderDetail",
            updataPayStaUrl: "/Users/PayOver",
            getDatas: {},
            orderSta: "",
            copyData: "4546514645",
			localkcName:"",
			zhName:"",//账户名称
			moneyNo:"",//账号
			bankOpen:"",//开户行

            datas: {
                type: "order_info",
                user_id: "", //当前请求用户Id
                token: "", //当前登录用户token
                id: "",
            },
        };
    },

    created() {
		var _this = this;
		wx.getStorage({
			key:"kcName",
			success(res){
				if(res){
					_this.localkcName = res;
					if(res.data == "木里一期" || res.data == "木里二期"){
						_this.zhName = "成都励诚教育咨询有限公司";
						_this.moneyNo = "6096 9434 8";
						_this.bankOpen = "中国民生银行成都东大街支行";
					}else if(res.data == "木里三期" || res.data == "木里四期" || res.data == "西溪河矿场"){
						_this.zhName = "成都毛球中合科技合伙企业（有限合伙）";
						_this.moneyNo = "4402 2430 0910 0161 648";
						_this.bankOpen = "中国工商银行股份有限公司成都金牛支行";
					}
					else if(res.data == "固滴矿场"){
						_this.zhName = "成都毛球华数科技合伙企业（有限合伙）";
						_this.moneyNo = "4402 2430 0910 0166 282";
						_this.bankOpen = "中国工商银行股份有限公司成都金牛支行";
					}
				}else{
					 wx.showToast({
						title: "获取矿场失败",
						icon: "none"
					});
				}
			}
		});
	},
    mounted() {
        var _this = this;
        // wx.getStorage({
        //     key: "user_id",
        //     success(res) {
        //         if (res) {
                    
        //         }
        //     },
        //     fail(err) {
        //         wx.showToast({
        //             title: "获取失败",
        //             icon: "none"
        //         });
        //         // wx.navigateBack();
        //     }
        // });
        wx.getStorage({
            key: "user_token",
            success(r) {
                if (r) {
                    // _this.datas.user_id = res.data;
                    _this.datas.token = r.data;
                    _this.datas.id = _this.$root.$mp.query.getId;
                    _this.getData();
                }
            },
             fail(err) {
                wx.showToast({
                    title: "获取失败",
                    icon: "none"
                });
                wx.navigateBack();
            }
        });
    },
    methods: {
        getData() {
            //this.$API = js(wx);
            this.$API
                .post(this.url, this.datas)
                .then(
                    res => {
                        if (res) {
                            this.getDatas = res.result;
                            if (res.result.status == 2) {
                                this.orderSta = '待支付';
                            } else if (res.result.status == 3) {
                                this.orderSta = '待核实';
                            } else if (res.result.status == 4) {
                                this.orderSta = '已支付';
                            }
                        }
                    },
                    true,
                    true
                );
        },
        updataPaySta() {
            if (this.orderSta == "待支付") {
                wx.showModal({
                    title: '确认支付提示',
                    content: '请确定是否已经支付?',
                    success: (res) => {
                        if (res.confirm) {
                            this.submitPaySta();
                        } else if (res.cancel) {}
                    }
                });
            }
        },
        submitPaySta() {
            var data = {};
            data = this.datas;
            data.type = "pay_over";
            //this.$API = js(wx);
            this.$API
                .post(this.updataPayStaUrl, data)
                .then(
                    res => {
                        if (res) {
                            this.orderSta = "待核实";
                        }
                    },
                    true,
                    true
                );
        },
        cpaer() {
            wx.setClipboardData({
                data: this.getDatas.order_sn,
                success(res) {
                    wx.getClipboardData({
                        success(res) {
                            console.log("showsomeThing");
                            console.log(res.data); // data
                        }
                    });
                }
            });
        }
    }
};
</script>

<style>
.details {
    width: 750rpx;
    background-color: rgba(226, 226, 226, 0.404);
    overflow-y: scroll;
    padding-bottom: 30rpx;
}

.details_1 {
    width: 750rpx;
    height: 630rpx;
    background-color: white;
    margin-top: 30rpx;
}

.details_2 {
    width: 750rpx;
    height: 680rpx;
    background-color: white;
    margin-top: 30rpx;
}

.details_3 {
    width: 750rpx;
    padding-bottom: 30rpx;
    background-color: white;
    margin-top: 30rpx;
}

.details_1_1 {
    width: 690rpx;
    height: 100rpx;
    font-weight: 600;
    line-height: 100rpx;
    border-bottom: 2rpx solid #e2e2e2;
    margin-left: 30rpx;
    color: #ff5858;
    font-size: 32rpx;
    text-align: center;
}

.details_1_2 {
    width: 690rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 2rpx solid #e2e2e2;
    margin-left: 30rpx;
    font-weight: bold;
    font-size: 32rpx;
}

.details_list {
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-left: 30rpx;
}

.details_list div {
    float: left;
}

.details_list div:nth-of-type(1) {
    width: 200rpx;
    text-align: left;
    color: #999999;
    font-size: 28rpx;
}

.details_list div:nth-of-type(2) {
    width: 490rpx;
    text-align: right;
    font-size: 28rpx;
}

.details_listb {
    width: 690rpx;
    height: 80rpx;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #e2e2e2;
}

.details_listb div:nth-of-type(1) {
    width: 200rpx;
    text-align: left;
    color: #999999;
    font-size: 28rpx;
    line-height: 80rpx;
    float: left;
}

.details_listb div:nth-of-type(2) {
    width: 370rpx;
    text-align: right;
    font-size: 28rpx;
    line-height: 80rpx;
    float: left;
}

.details_listb div:nth-of-type(3) {
    width: 90rpx;
    text-align: right;
    font-size: 24rpx;
    height: 48rpx;
    border-radius: 3px;
    border: 1rpx solid black;
    box-sizing: border-box;
    line-height: 48rpx;
    text-align: center;
    margin-left: 30rpx;
    margin-top: 16rpx;
    float: left;
}

.anN {
    width: 140rpx;
    height: 60rpx;
    color: white;
    font-size: 28rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 3px;
    background-color: #ccc;
    margin-left: 580rpx;
    margin-top: 30rpx;
}

.anNBackground {
    background: linear-gradient(90deg,
            rgba(32, 201, 225, 1),
            rgba(72, 241, 211, 1)) !important;
}

.biao {
    width: 690rpx;
    height: auto;
    font-size: 24rpx;
    margin-left: 30rpx;
    margin-top: 30rpx;
    border-right: 1rpx solid #E2E2E2;
    border-bottom: 1rpx solid #E2E2E2;
    box-sizing: border-box;

}

.biao_a {
    width: 690rpx;
    height: auto;
    overflow: hidden;
}

.biao_a div {
    width: 172.5rpx;
    height: auto;
    float: left;
    color: #999999;
    text-align: center;
    line-height: 80rpx;
    border-left: 1rpx solid #E2E2E2;
    border-top: 1rpx solid #E2E2E2;
    box-sizing: border-box;
}

.biao_b {
    width: 690rpx;
    height: 80rpx;
    overflow: hidden;
}

.biao_b div {
    width: 172.5rpx;
    height: auto;
    float: left;
    line-height: 80rpx;
    text-align: center;
    border-left: 1rpx solid #E2E2E2;
    border-top: 1rpx solid #E2E2E2;
    box-sizing: border-box;
}

.text_color_red {
    color: #ff5858 !important;
}
</style>
